<template>
  <div class="data-statistics">
    <div class="list">
      <div
        class="item"
        v-for="(item, index) in dataStatisticsList"
        :key="index"
        @click="
          $router.push({
            path: '/order-log',
            query: { apResult: item.value },
          })
        "
      >
        <div class="t1">{{ item.label }}</div>
        <div class="t2" :style="{ color: item.color }">{{ item.number }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import { replace, loginOutUser } from "@/utils";
import { mapGetters } from "vuex";
import apiService from "@/api/apiService";
// import storage from "store";
// import appConfig from "@/config/appConfig";

export default {
  data() {
    return {
      dataStatisticsList: [
        {
          label: this.$t("等待中"),
          number: 0,
          color: "#ff7200",
          value: 0,
        },
        {
          label: this.$t("进行中"),
          number: 0,
          color: "#819cfc",
          value: 1,
        },
        {
          label: this.$t("已完成"),
          number: 0,
          color: "#09bb07",
          value: 2,
        },
        {
          label: this.$t("失败"),
          number: 0,
          color: "#e64340",
          value: 4,
        },
      ],
    };
  },
  created() {
    // getCurrentUser('header')
    // this.user = storage.get(appConfig.ACCESS_TOKEN_NAME);
    // if (this.user) {
    //   this.login = false;
    // } else {
    //   this.login = true;
    //   // loginOutUser();
    // }
    this.getData();
  },
  computed: {
    ...mapGetters(["getToken"]),
  },
  methods: {
    getData() {
      apiService.post("/user-info").then((res) => {
        const { waitingOrder, doingOrder, doneOrder, refuseOrder } = res.data;
        this.dataStatisticsList[0]["number"] = waitingOrder;
        this.dataStatisticsList[1]["number"] = doingOrder;
        this.dataStatisticsList[2]["number"] = doneOrder;
        this.dataStatisticsList[3]["number"] = refuseOrder;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.data-statistics {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1rem 0;

    .item {
      position: relative;
      flex: 1;
      flex-shrink: 0;
      text-align: center;

      &:not(:last-child) {
        &:after {
          content: "";
          width: 0.5px;
          height: 0.3rem;
          background-color: #ccc;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .t1 {
        color: #333;
        font-size: 0.14rem;
      }

      .t2 {
        font-size: 0.12rem;
        margin-top: 0.05rem;
      }
    }
  }
}
</style>
